<template>
  <div v-if="dis" class="comment" @mouseenter="enter" @mouseleave="leave">
    <div class="left">
      <img :src="'http://localhost:8010/getImage?name='+this.commentObj.avaterUrl" alt />
    </div>
    <div class="right">
      <div class="headline">
        <span>{{commentObj.nickname}}</span> &ensp;
        <span>LV.{{commentObj.level}}</span>
        <div class="r">{{ind}}F</div>
      </div>
      <div class="content">
        <div class="to_return" v-if="commentObj.to_createdate">
          引用 {{commentObj.to_nickname}} 发表于 {{to_createdate}} 的回复:
          <div class="c">{{commentObj.comment.toContent}}</div>
        </div>
        <div class="s" v-if="commentObj.to_createdate">
          回复{{commentObj.to_nickname}}:
          <br />
        </div>
        {{commentObj.comment.content}}
      </div>
      <div class="footer">
        <div class="l">{{cdate}}</div>
        <div class="r" style="margin-right:20px;" @click="return_comment()">回复</div>
        <div
          class="r"
          v-if="commentObj.comment.uid == $store.state.user.userInfo.user.uid"
          style="margin-right:20px;"
          @click="delete_submit()"
        >删除</div>
        <jubao
          class="r"
          title="评论举报"
          style="margin-right:20px;color:darkgray;"
          :nickname="commentObj.nickname"
          :uid="commentObj.comment.uid"
          :cid="commentObj.comment.id"
          outtype="评论内容不合法"
        ><span v-show="visiblejubao">举报</span></jubao>
      </div>
      <div class="returnbox" v-show="this.ind== this.$store.state.commons.commentindex">
        <el-input
          style="width: 780px;"
          :rows="3"
          v-model="return_com"
          type="textarea"
          placeholder="最多可以回复86个字..."
        ></el-input>
        <el-button
          @click="submit_comment"
          type="primary"
          size="mini"
          style="float:right;margin:8px 0;"
        >发表回复</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import jubao from "@/components/strategy/jubao";
export default {
  components: {
    jubao
  },
  props: {
    commentObj: {
      style: Object,
      default: {
        comment: {},
        avaterUrl: "",
        nickname: "",
        to_createdate: "",
        to_nickname: "",
        level: 0
      }
    },
    ind: {
      style: String
    }
  },
  data() {
    return {
      dis: true,
      cdate: "",
      to_createdate: "",
      isvisible: false,
      return_com: "",
      visiblejubao: false
    };
  },
  mounted() {
    this.$store.commit("commons/setCommentIndex", 0);
  },
  methods: {
    enter() {
      this.visiblejubao = true;
    },
    leave() {
      this.visiblejubao = false;
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    return_comment() {
       if (!this.$store.state.user.userInfo.token) {
        this.$router.push("/user/login");
        return
      }
      this.$store.commit("commons/setCommentIndex", this.ind);
      window.console.log(this.$store.state);
    },
    delete_submit() {
      this.$axios
        .get("/api2/comment/delete/?id=" + this.commentObj.comment.id)
        .then(res => {
          this.dis = false;
        });
    },
    submit_comment() {
     
      let count = this.return_com.length;
      if (count == 0) {
        this.$message.error("回复内容不能为空！");
      } else if (count > 86) {
        this.$message.error("回复内容字数最多为86个！");
      } else {
        this.$axios
          .post(
            "/api2/comment/return/" +
              this.$store.state.user.userInfo.token +
              "/" +
              this.commentObj.comment.id,
            {
              artId: this.$store.state.commons.articleId,
              content: this.return_com
            }
          )
          .then(res => {
            if (res.data.type == "SUCCESS") {
              this.isvisible = false;
              this.$message.success("发表成功！");
              //0是默认任意评论没有回复框
              this.$store.commit("commons/setCommentIndex", 0);
              location.reload();
            }
          });
      }
    }
  },
  created() {
    this.cdate = this.dateFormat(
      "YYYY-mm-dd HH:MM",
      new Date(this.commentObj.comment.dateComment)
    );
    this.to_createdate = this.dateFormat(
      "YYYY-mm-dd HH:MM",
      new Date(this.commentObj.to_createdate)
    );
  }
};
</script>

<style lang="less" scoped>
.comment {
  display: block;
  margin: 20px auto;
  width: 950px;
  background: white;
  .left {
    // background: red;
    display: inline-block;
    position: relative;
    width: 100px;
    min-height: 100px;
    vertical-align: top;
    img {
      position: absolute;
      height: 48px;
      width: 48px;
      border-radius: 100px;
      top: 20px;
      left: 20px;
      border: 1px solid rgb(255, 255, 255);
    }
  }
  .right {
    display: inline-block;
    position: relative;
    width: 800px;
    min-height: 150px;
    .headline {
      position: absolute;
      top: 10px;
      height: 48px;
      width: 780px;
      color: #27c18f;
      .r {
        display: block;
        color: #999;
        float: right;
      }
    }
    .content {
      width: 780px;
      padding: 20px 0px;
      padding-top: 58px;
      color: black;
      .s {
        padding-bottom: 10px;
      }
      .to_return {
        color: #999;
        font-size: 13px;
        .c {
          padding: 10px;
        }
      }
    }
    .footer {
      width: 788px;
      bottom: 0px;
      .l {
        display: inline-block;
        color: #999;
        font-size: 15px;
      }
      .r {
        // display: inline-block;
        color: #0078d7;
        // right: 0px;
        // margin-left: 600px;
        float: right;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .returnbox {
      width: 780px;
      border: 4px solid lightblue;
    }
  }
}
</style>